import React from 'react';
import { connect } from 'dva';
import { Form, Input, InputNumber, Button } from 'antd';

const formItemLayout = {
  labelCol: {
    xs: { span: 3 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 3,
    },
  },
};

const CheckMessage = ({ dispatch, title, content }) => {

  function onFinish() {
    dispatch({
      type: 'message/setMessageState',
      payload: {
        AdminMessageListState: 'replymessage',
        messageListState: 'sendmessage'
      },
    });
  }

  function onReset() {
    dispatch({
      type: 'message/setMessageState',
      payload: {
        AdminMessageListState: 'messagelist',
        messageListState: 'messagelist'
      }
    })
  }

  return (
    <Form {...formItemLayout} name="new-messages"
      onFinish={onFinish}
      onReset={onReset}>
      <Form.Item name={'title'} label="标题" >
        <Input placeholder={title} disabled={true}/>
      </Form.Item>
      <Form.Item name={'content'} label="内容">
        <Input.TextArea placeholder={content} disabled={true} />
      </Form.Item>
      <Form.Item { ...tailFormItemLayout }>
        <Button type="primary" htmlType="submit">
          回复
        </Button>
        <Button type="primary" htmlType="reset" style={{ marginLeft: 10 }}>
          返回
        </Button>
      </Form.Item>
    </Form>
  )
};

export default connect(state => {
  const { messageId, messageList } = state.message;
  let title;
  let content;
  messageList.forEach(item => {
    const id = item.messageId;
    if (messageId == id) {
      title = item.title;
      content  = item.content;
    }
  })

  return {
    title,
    content
  }
})(CheckMessage);
